<template>
  <div class="viewer-images" v-viewer>
    <!-- 标题 -->
    <p class="title"><span>{{$I18n.imageData}}</span><i class="el-icon-close"></i></p>
    <!-- 图像列表 -->
    <template v-for="list in images">
      <div v-for="img in list.listApplyAttachmentBo">
        <img :src="img.base64" :alt="img.alt"/>
        <!-- 名称和页数 -->
        <p class="img-info"><span class="name">{{list.attachmentTypeName}}</span> <span>{{img.attachmentSeq}}/{{list.totalPage}}</span></p>
      </div>
    </template>
    <p class="no-data">{{$I18n.noImageData}}</p>
  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
import INTERFACE from './interface'
// viewer具体用法查看网址  https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/
Vue.use(Viewer)

export default {
  props: ['images'],
  data() {
    return {
      noData: false
    }
  },
  watch: {
    images(v) {
      // 没有数据，显示无数据提示
      if (!v || !v.length) {
        this.noData = true
        return
      }
      v.forEach(item => {
        item.listApplyAttachmentBo.forEach(v1 => {
          INTERFACE.getByte({mediaId: v1.attachmentId}).then(res => {
            // 获取base64
            this.$set(v1, 'base64', 'data:image/jpeg;base64,' + res.data.fileByte)
            // 设置浏览页面标题
            this.$set(v1, 'alt', `${item.attachmentTypeName}( ${v1.attachmentSeq} / ${item.totalPage})`)
          })
        })
      })
    }
  }
}
</script>

<style lang="stylus">
.viewer-images
  width 190px
  min-width 190px
  height 100%
  display flex
  flex-direction column
  align-items center
  background #fff
  margin-right 10px
  padding 12px 0
  overflow-y auto
  box-sizing border-box

  .title
    width 150px
    color #666
    font-size 16px
    display flex
    justify-content space-between
    align-items center
    .el-icon-close
      font-size 12px
      cursor pointer
  img
    width 150px
    height 214px
    border-radius 6px
    margin-top 15px

  .img-info
    color rgba(85,85,85,.7)
    display flex
    justify-content space-between
    margin-top 5px
    .name
      display inline-block
      max-width 110px
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
  .no-data
    width 90%
    text-align center
    word-break break-all
    color #666
    font-size 16px
    margin-top 100px

</style>